<template>
  <a-drawer
    :width="500"
    :visible="props.visible"
    @ok="ok"
    @cancel="cancel"
    unmountOnClose
  >
    <template #title> 基础信息 </template>
    <div v-if="hierarchy === 2">
      <div v-for="(item, index) in dataShow.data" :key="item.ctlCode">
        <p>{{ item.cnName }}</p>
        <a-table
          :data="item.subRelDetail"
          @change="handleChange($event, index)"
          :draggable="{ type: 'handle', width: 40 }"
          stripe
        >
          <template #columns>
            <a-table-column align="center" :width="200">
              <template #title> 字段名称 </template>
              <template #cell="{ record }">
                {{ record.ctlCnName }}
              </template>
            </a-table-column>
            <a-table-column align="center" :width="80">
              <template #title> 是否显示 </template>
              <template #cell="{ record }">
                <a-checkbox
                  @change="changeShow($event as boolean, record)"
                  v-model="record.show"
                ></a-checkbox>
              </template>
            </a-table-column>
            <!-- <a-table-column align="center" :width="80">
                <template #title> 是否必填 </template>
                <template #cell="{ record }">
                <a-checkbox v-model="record.isRequired"></a-checkbox>
                </template>
            </a-table-column> -->
          </template>
        </a-table>
      </div>
    </div>
    <div>
      <a-table
        :data="dataShow.data"
        @change="handleChange($event)"
        :draggable="{ type: 'handle', width: 40 }"
      >
        <template #columns>
          <a-table-column align="center" :width="200">
            <template #title> 字段名称 </template>
            <template #cell="{ record }">
              {{ record.cnName }}
            </template>
          </a-table-column>
          <a-table-column align="center" :width="80">
            <template #title> 是否显示 </template>
            <template #cell="{ record }">
              <a-checkbox
                @change="changeShow($event as boolean, record)"
                v-model="record.show"
              ></a-checkbox>
            </template>
          </a-table-column>
          <!-- <a-table-column align="center" :width="80">
                <template #title> 是否必填 </template>
                <template #cell="{ record }">
                <a-checkbox v-model="record.isRequired"></a-checkbox>
                </template>
            </a-table-column> -->
        </template>
      </a-table>
    </div>
  </a-drawer>
</template>
<script setup lang="ts">
import clonedeep from 'lodash.clonedeep';
const props = withDefaults(
  // 参数说明
  defineProps<{ data?: any; visible: boolean; hierarchy: number }>(),
  {}
);
const pending: string[] = reactive([]);
const pendingData: any = reactive([]);
const dataShow: any = reactive({ data: [] });
const changeShow = (e: boolean, data: any) => {
  if (pending.indexOf(data.ctlCode + data.subsetId) === -1) {
    pending.push(data.ctlCode + data.subsetId);
    pendingData.push(data);
  }
};
const ok = () => {
  emit('upshowData', clonedeep(pendingData));
  pending.length = 0;
  pendingData.length = 0;
  emit('update:visible', false);
};
const handleChange = (e: any, index?: number) => {
  emit('sortshowData', { data: e, index });
};
const cancel = () => {
  pending.length = 0;
  pendingData.length = 0;
  emit('update:visible', false);
};

watch(
  () => props.data,
  (val) => {
    dataShow.data = clonedeep(val);
  }
);
const emit = defineEmits(['update:visible', 'upshowData', 'sortshowData']);
</script>
<style lang="less" scoped></style>
